<!DOCTYPE html>
<html>
	<head>
		
		<title>apple</title>
		<style type="text/css">
			#box{
				width: 300px;
				height: 480px;
				margin:0 auto;
				background-color: black;
				border-radius: 20px;
			}
			#result{
				height: 60px;			
				color: white;
				font-size: 40px;
				text-align: right;
				padding-top:40px;
			}
			#buttons{
				height: 380px ;
				color: white;
				text-align: center;
			}
			.button{
				width: 65px;
				height: 65px;
				float: left;
				line-height: 65px;
				font-size: 24px;
				border-radius: 50%;
				background-color: #141614;
				margin:5px;
				transition:all 0.5s;
			}
			.button:hover{
				background-color: orange;
				cursor: pointer;
			}
			#button-zero{
				width: 140px;
				border-radius: 50px;
			}
			.div-gray{
				background-color: #666;
			}
			.div-orange{
				background-color:darkorange;
			}
		</style>
	</head>
	<body>
		
		<div id="box">
			<div id="result">0</div>
			<div id="buttons">
				<div class="button div-gray" onclick="clearZero()">AC</div>
				<div class="button div-gray" onclick="backup()"><-</div>
				<div class="button div-gray" onclick="clickSymbol('%');">%</div>
				<div class="button div-orange" onclick="clickSymbol('/');">/</div>
				<div class="button" onclick="clickSymbol('7');">7</div>
				<div class="button" onclick="clickSymbol('8');">8</div>
				<div class="button" onclick="clickSymbol('9');">9</div>
				<div class="button div-orange" onclick="clickSymbol('*');">*</div>
				<div class="button" onclick="clickSymbol('4');">4</div>
				<div class="button" onclick="clickSymbol('5');">5</div>
				<div class="button" onclick="clickSymbol('6');">6</div>
				<div class="button div-orange" onclick="clickSymbol('-');">-</div>
				<div class="button" onclick="clickSymbol('1');">1</div>
				<div class="button" onclick="clickSymbol('2');">2</div>
				<div class="button" onclick="clickSymbol('3');">3</div>
				<div class="button div-orange" onclick="clickSymbol('+');">+</div>
				<div class="button" id="button-zero" onclick="clickSymbol('0');">0</div>
				<div class="button" onclick="clickSymbol('.');">.</div>
				<div class="button div-orange" onclick="calculate()">=</div>
			</div>
		</div>
		
		<script type="text/javascript">
			//设置HTML标签值  两个步骤
			/*
			1.先获取HTML标签
			*/
		   //var show = document.getElementById("result");
		   /* 
		   2通过innerHTML来获取或设置HTML标签的内容
		   */
		  //获取
		 // document.write(show.innerHTML);
		  //设置
		  //show.innerHTML = "哈哈哈";
			// 变为全局变量
		  var ispoint = true;//允许输入小数点 false为不允许
		  function clickSymbol(str){
			  var isInsert = true;//假设str可以被插入
			  
			  var show = document.getElementById('result');
			  //show.innerHTML=show.innerHTML +str;
			  //利用函数判断str是否是运算符 
			  var symbol = isSymbol(str);
			  
			//判断当前是否为0,如果是0并且将要插入的不是小数点或者运算符则去掉0 
			 if(show.innerHTML=="0"&&str!="." && symbol==false){
			 	show.innerHTML="";
			 }		 
			  
			
				  
			//判断显示的长度是否超过12,如果超过则不能继续输入
			  if(show.innerHTML.length <12){				  
			  }else{
				  isInsert = false;
				  alert("太长了，已超过12");
			  }
			  
			//判断如果最后一个字符是运算符，那么不允许再插入运算符
			var lastChar = show.innerHTML.substr(show.innerHTML.length-1,1);
			var lastissymbol = isSymbol(lastChar);
			if(lastissymbol==true && symbol==true){
				isInsert = false;
			}	
			
			// bug  小数点重复
			/* 小数点 bug开始 */
			//判断最后一位是否是小数点,如果是,则不允许继续输入小数点
			if(lastChar=="." && str=="."){
			 isInsert=false;	
			}
			//如果最后一位是小数点,那么不允许输入运算符
			if(lastChar=="."&&symbol==true){
				isInsert=false;
			}
			//如果将要输入小数点,但ispoint为false,则不允许输入
			if(str=="."&&ispoint==false){
				isInsert=false;
			}
		
			// 如果允许输入，并且输入的是运算符，那么则允许之后输入小数点
			if(isInsert==true && symbol==true){
				ispoint =true;
			}
			
			/*   小数点 bug结束 */
			//根据变量值来确定是否插入
			if(isInsert ==true){
				show.innerHTML +=str;
				//如果插入的是小数点那么设置point为false
				if(str=="."){
					ispoint=false;
				}
			}else{
				//不插入
			}
			
		  }
		  
		  
		  
		  
		  //判断一个字符是否是运算符
		  function isSymbol(str){
			  if(str=="+" || str=="-" || str=="/" || str=="*" || str=="%"){
				  return true;
			  }else{
				  return false;
			  }
		  }
		  
		  // eval()
		  function calculate(){
			var show = document.getElementById("result");
			var r = eval(show.innerHTML);
			show.innerHTML  =r;
			//如果禁止输入小数点,则解除
			ispoint=true;
			//show.innerHTML = eval(show.innerHTML);
		  }
		  //清零功能
		  function clearZero(){
			  var show = document.getElementById("result");
			  show.innerHTML = "0";
		  }
		  // 后退功能
		  function backup(){
			  var show = document.getElementById("result"); 
			  var str = show.innerHTML.substr(0,show.innerHTML.length-1);
			  show.innerHTML = str;
			  if(show.innerHTML.length==0){
				  show.innerHTML ="0";
			  }
			// substring  substr
			// substr()
			//var str = "hello world";
			//获取hello worl
			//alert(str.substr(0,str.length-1));
		  }
		  // bug  运算符重复以及第一个可以是运算符
		</script>
	</body>
</html>